<template>
    <div ref="videsInfoBoxMain">
      <div class="title" >
        <span class="line"></span>
        <span
          ><i class="el-icon-arrow-left" v-show="!showVideoDetailsInfo" style="margin-right:30px;cursor: pointer;font-size:18px;font-weight:1000;" @click="blackVideo()"></i><i style="font-size: 0.1rem" class="iconfont icon-shipin"></i>
          {{$t('wechat.videoList')}}</span
        >
      </div>
      <transition name="el-zoom-in-center">
      <div @scroll="handleScroll" ref="videoList" v-show="showVideoDetailsInfo" class="gutter-example">
        <div v-for="(item,index) in videoList" :key="index" @click="playVideo(item)" class="itemBoxVideo"  >
          <div>
          <video
          ref="media"  width="100%" height="260"  :src="item.respath" ></video>
          <!-- <div v-else class="itemBoxVideo" style="width:100%;text-align: center;padding-top: 80px;" ><i class="el-icon-warning-outline" style="color:#2196f3;"></i> {{$t('wechat.zhuanma')}}</div> -->
        </div>

          <svg class="playLogo" width="60" height="60" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#c6c6ca" stroke="#c6c6ca" stroke-width="4" stroke-linejoin="round"/><path d="M20 24V17.0718L26 20.5359L32 24L26 27.4641L20 30.9282V24Z" fill="#FFF" stroke="#FFF" stroke-width="4" stroke-linejoin="round"/></svg>
        </div>
        <div class="loadingBox" v-if="showLoading" style="color:#2196f3;"><i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}</div>
      </div>
    </transition>

      <!-- 详情区 -->
        <div v-if="!showVideoDetailsInfo" class="detailsBox">
          <div>
            <!-- <video v-if="formate(videoActionData)" width="100%" height="220" controls :src="formateScr" ></video> -->
            <video width="100%" height="220" controls :src="formateScr" ></video>
          </div>
          <h3 style="font-weight: bold;padding-left:10px;height:34px;border-bottom:1px solid #e7e7e7;line-height: 34px;margin-bottom:5px;">{{$t('wechat.videoInfo')}}</h3>
          <div style="padding-left:10px;" ><i class="el-icon-warning-outline"></i> {{$t('wechat.playTip')}} <el-link type="primary" style="float: right;margin-right:20px;" @click="codeFormate(videoActionData)"><i v-if="showTime" class="el-icon-loading"></i> {{$t('wechat.playzhuanma')}}</el-link><el-link title="点击跳定位到聊天" type="primary" style="" @click.stop="positionMessage(videoActionData)">定位到聊天</el-link></div>
          <div style="padding-left:10px;"><i class="el-icon-folder"></i> 来源：{{ videoActionData.contactname }}</div>
          <div style="padding-left:10px;"><i class="el-icon-folder"></i> 时间：{{ formateDate(videoActionData.msgtime) }}</div>
          <!-- <div style="padding-left:10px;"><i class="el-icon-files"></i> {{$t('wechat.fileSize')}}:{{(videoActionData.filesize/1048576).toFixed(3)}}MB ({{videoActionData.filesize}}Byte)</div> -->
          <div style="padding-left:10px;"><i class="el-icon-lock"></i> MD5：{{ videoActionData.filemd5 }}</div>
          <div style="padding-left:10px;word-wrap: break-word;"><i class="el-icon-guide"></i> {{$t('wechat.imgPath')}}:{{ videoActionData.respath }}</div>
        </div>

      <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
        :maskClosable="false" title="提示" @ok="handleOk">
        <p>{{$t('wechat.biaojibeizhu')}}</p>
        <p><el-input type="textarea" v-model="remark"></el-input></p>
      </a-modal>
    </div>
  </template>

  <script>
  import { videoPlayer } from "vue-video-player";
  import "video.js/dist/video-js.css";
  import { getWxMediaInfo,getFormateCode } from '@/api/weChat/weChat_api'
  import { parseTime } from "@/utils/index";
  import { Alert } from 'element-ui';
  import { sendMarkOrderApi } from '@/api/markApi/index'
  import { throttle } from 'lodash';

  export default {
    name: "wxVideo",
    props:['sendData'],
    components: {
      videoPlayer,
    },
    data() {
      return {
        scrollTopData:0,
        showTime:false,
        debounceTimer:null,
        videoList:[],
        showLoading:false,
        loadClass:'el-icon-loading',
        loadingText:'正在加载. . .',
        formateScr:'',
        videoActionData:'',
        showVideoDetailsInfo:true,
        showRemark:false,
        remark:'',
        id:'',
        index:null,
        html:'转码',
        show:false,
        tableData:[],
        offset:1,
        limit:20,
        total:0,
        src: "",
        playerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
          autoplay: false, // 如果为true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 是否视频一结束就重新开始。
          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: "zh-CN",
          aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
            {
              type: "video/mp4", // 类型
              src: "", // url地址
            },
          ],
          poster: "", // 封面地址
          notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true, // 当前时间和持续时间的分隔符
            durationDisplay: true, // 显示持续时间
            remainingTimeDisplay: false, // 是否显示剩余时间功能
            fullscreenToggle: true, // 是否显示全屏按钮
          },
        },
      };
    },
    created() {
        if(this.sendData.list_offset){
      this.offset=1;
      this.limit=20*this.sendData.list_offset;
      }else{
        this.offset=1;
        this.total=0;
      }

      this.init();
    },
    watch: {
      "$store.state.account.weChat": function () {
        if(this.sendData.list_offset){
      this.offset=1;
      this.limit=20*this.sendData.list_offset;
      }else{
        this.offset=1;
        this.total=0;
      }
      this.showVideoDetailsInfo = true;
      this.videoList = [];
        this.init();
      },
    },
    mounted() {
  },
    methods: {
      // 定位到聊天
      positionMessage(item){
        this.showVideoDetailsInfo = true;
        // item['proof_num'] = this.sendData.proof_num;
        // item['username'] = sessionStorage.getItem('usernameTitle');
        // item['model'] = 'wechat';
        // item['msgtime'] = item.msgtime;
        // item['contact_username'] = item.contactname;
        // item['id'] = item.id;
        // item['list_offset'] = 1;
        // item['msg_offset'] = 1;
        // item['app_name'] = item.contactname.includes('@')?'群组':'好友';

        item['proof_num'] = this.sendData.proof_num;
        item['username'] = sessionStorage.getItem('usernameTitle');
        item['model'] = 'wechat';
        item['msgtime'] = item.msgtime;
        item['contact_username'] = item.contactname;
        item['id'] = item.id;
        item['list_offset'] = this.offset;
        item['msg_offset'] = 1;
        item['app_name'] = item.contactname.includes('@')?'群组':'好友';
        item['wxChildrenNode'] = true;
        item['scrollTop'] = this.scrollTopData;
        item['childrenModel'] = 'WXvideo';
        item['account_id'] = this.sendData.account_id;

        // 储存类型
        sessionStorage.setItem('model',"wechat")
        // 储存节点数据
        sessionStorage.setItem('sumData',JSON.stringify(item))
        // 激活跳转组件
        this.$store.commit('SET_ORDERDATA',Date.parse(new Date()))
        sessionStorage.setItem('only',true);
      },
      handleScroll:throttle(function(){

        // 获取列表元素
        const list = this.$refs.videoList;
      this.scrollTopData = list.scrollTop;

        // 判断滚动到底部
        if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
          this.showLoading=true;

          if(this.videoList.length<this.total){
            this.loadClass = 'el-icon-loading';
            this.loadingText = '正在加载. . .';
            this.offset++;
            // 加载更多数据
            let that = this;
                that.init();
          }else{
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
          }

        }
      },1000),
      codeFormate(row){
        this.showTime = true;
        let data={
          mediaPath:row.respath,
          mediaType:2
        }
        getFormateCode(data).then(res=>{
        this.formateScr=res.data[0].direction;
        this.showTime = false;
        }).catch(err=>{
          this.showTime = false;
        })
      },
      formate(item){
        let filename = item.respath;
        if(filename.includes('.')){
          let extension = filename.match(/(?:\.([^.]+))?$/)[1];
            if(extension !=='mp4' && extension !=='MP4'){
              return true
            }else{
              return false
            }
        }else{
            return true
        }
        
      },
      blackVideo(){
        this.showVideoDetailsInfo = true;
        this.formateScr = '';
      },
      playVideo(item){
        this.showVideoDetailsInfo = false;
        this.videoActionData = item;
        this.formateScr = item.respath;
      },
      getRefsAff(){
        return  this.$refs.videsInfoBoxMain;
      },
      handleOk(){
          let data={
          navigation_list:sessionStorage.getItem('arr').split(','),
          model:this.sendData.model,
          isChat:0,
          app_name:'',
          account_id:'',
          subtype:this.sendData.subtype,
          proof_num:this.sendData.proof_num,
          list_offset:this.offset,
          list_limit:this.limit,
          remark:this.remark,
          class:this.sendData.class,
          label:this.sendData.label,
          id:Number(this.id)
        }
        sendMarkOrderApi(data).then(res=>{
          this.showRemark=false;
          this.$message({
            message: '标记数据成功！',
            type: 'success'
          });
          this.init()
        })
      },
      // 添加标记点
      markOrder(item){
        this.id=item.id;
        this.showRemark=true;
      },
      getFileSize(fileByte) {
      var fileSizeByte = fileByte;
      var fileSizeMsg = "";
      if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "KB";
      else if (fileSizeByte == 1048576) fileSizeMsg = "1MB";
      else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "MB";
      else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1GB";
      else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      else fileSizeMsg = "文件超过1TB";
      return fileSizeMsg;
  },
      formateCodeVideo(row,index){
        this.index=index
        this.show=true
        this.html=``
        let data={
          mediaPath:row.path,
          mediaType:2
        }
        getFormateCode(data).then(res=>{
        this.show=false
        // res.data.direction
        this.tableData[index].path=res.data[0].direction
        this.html=`转码`
        }).catch(err=>{
        this.show=false
        })

      },
      formateDate(date) {
        return parseTime(date);
      },
      handleSizeChange(val) {
      this.limit=val
      this.init()
    },
    handleCurrentChange(val) {
      this.offset=val
      this.init()
    },
      init() {
        let data = {
          proof_num: this.sendData.proof_num,
          account_id:this.sendData.account_id,
          offset: this.offset,
          limit: this.limit,
        };
        getWxMediaInfo(data,'/tencent/video/list').then((res) => {
          this.showLoading=false;
          if(res.data.length == 0){
            this.showLoading=true;
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
            return;
          }
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            this.videoList.push(element)
          }
          try {
          this.total = res.data[0].cnt;
          if(this.sendData.list_offset){
          this.$nextTick(() => {
            this.$refs.videoList.scrollTop=this.sendData.scrollTop;
          })
          this.offset = this.sendData.list_offset
          this.limit = 20;
        }

          } catch (error) {
            this.total=0;
          }
        });
      },
    },
  };
  </script>
  <style scoped>
  .loadingBox{
    text-align: center;
    width: 100%;
  }
  .videoDetailsHeader{
    height: 50px;
    display: flex;
  }
  .itemBoxVideo{
    width: 49.7%;height:329px;cursor: pointer;position: relative;
    border: 1px solid #efefef;
  }
  .gutter-example>div{
   margin-bottom: 1px;
  }

  .badgeBox{
    width: 50px;
    height: 23px;
    border-radius: 10px;
    color: #fff;
    background: #f56c6c;
    text-align: center;
    line-height: 23px;
    font-size: 12px;
  }
  .btnBiaoji{
    position: absolute;
    top: 20px;
  }
  .biaozhuimg{
    width: 60px;
    height: 60px;
    position: absolute;
    top: 5px;
    right: 10px;
  }
  p{
    border: 1px solid rgb(235, 235, 235);
    padding-left: 10px;
  }
  .ant-row {
    margin: 0 !important;
  }
  .gutter-example {
    width: 100%;
    height: 800px;
    overflow-y: auto;
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 2px;
  }
  .detailsBox{
    width: 100%;
    height: 99vh;
    overflow-y: auto;
    position: relative;
  }
  .detailsBox>div{
    min-height: 30px;
    line-height: 30px;
    /* padding-left:10px; */
    border-bottom:1px solid #ebebeb;
  }
  .playLogo{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .gutter-example::-webkit-scrollbar {
    width: 8px;
  }
  /* <!--修改 滚动条的 下面 的 样式--> */
  .gutter-example::-webkit-scrollbar-track {
    background-color: rgb(252, 252, 252);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* <!--修改 滑块 --> */
  .gutter-example::-webkit-scrollbar-thumb {
    background-color: #dfdfdf;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  .hongbaotext {
    position: absolute;
    right: 50px;
    top: 40px;
    color: #fff;
  }

  </style>
  <style scoped>
  .title {
    width: 100%;
    height: 50px;
    background: #2b2f3a;
    margin-bottom: 2px;
    font-size: 0.1rem;
    line-height: 50px;
    padding-left: 20px;
    color: #fff;
  }
  .line {
    width: 8px;
    height: 100%;
  }
  * {
    margin: 0;
    padding: 0;
  }

  .videoBox {
    position: relative;
  }
  .fenYeBox {
    display: flex;
    padding-left: 15%;
    padding-top: 2px;
  }

  /* 当屏幕宽度大于2560时 */
  @media screen and (min-width: 2360px) {
    .itemBoxVideo{
    width: 33%;height:268px;cursor: pointer;position: relative;
    border: 1px solid #efefef;

  }

  .gutter-example {
    width: 100%;
    height: 93%;
    overflow-y: auto;
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 2px;
  }
  }

  /* @media screen and (min-width: 3440px) {
  .gutter-example {
    width: 100%;
    height: 800px;
    overflow-y: auto;
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 2px;
    padding-bottom:100px;
  }
  } */
  </style>
